<template>
  <div id="index">
    <el-row>
      <!--左侧部分 -->
      <el-col :span="5" id = "left" style="left: 0px;">
        <el-row >
          <el-col :span="24">
            <div class = "chart_left chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">预约车辆归属地结构分布</div>
                </el-col>
              </el-row>
              <div id="chart1" class="chart"></div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_left chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw; ">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">预约车辆停车场分布</div>
                </el-col>
              </el-row>
              <div id="chart2" class="chart" ></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <div class="clear"></div>
      <!--地图部分-->
      <el-col :span="24">
        <div id="allmap" ref="allmap"></div>
      </el-col>
      <!--中间部分-->
        <div class = "chart_center " style="height:7vh;width:26vw;">
            <el-row>
                <el-col :span="1" style="width: 1.2vw">
                    <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                    <div class = "title">故障分布地图</div>
                </el-col>
            </el-row>
        </div>
      <!--右侧部分 -->
      <el-col :span="5" id = "right" style="right: 0px;">
        <el-row>
          <el-col :span="24">
            <div class = "chart_right chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">预约车辆成功率分布</div>
                </el-col>
              </el-row>
              <div id = "chart3" class = "chart"></div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_right chart_main">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">预约车辆使用偏离分析</div>
                </el-col>
              </el-row>
              <div id = "chart4" class = "chart"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { TMap } from '../TMap';
  import jq from 'jquery';
  import axios from 'axios';
   import '../../static/js/map/china.js';
  import {config,xAxis,yAxis,yAxiss,grid,tooltip1,legend} from '../../static/js/config/chartConfig.js';
  var echarts = require('echarts');

  export default {
    name:"index",
    components: {

    },
    data(){
      return{

      }
    },
    mounted () {
      this.map();
      this.chart1();
      this.chart2();
      this.chart3();
      this.chart4();
    },
    methods: {
      map(){
        var allmap = echarts.init(document.getElementById('allmap'));
        var geoCoordMap = {
          '上海': [121.4648,31.2891],
          '东莞': [113.8953,22.901],
          '东营': [118.7073,37.5513],
          '中山': [113.4229,22.478],
          '临汾': [111.4783,36.1615],
          '临沂': [118.3118,35.2936],
          '丹东': [124.541,40.4242],
          '丽水': [119.5642,28.1854],
          '乌鲁木齐': [87.9236,43.5883],
          '佛山': [112.8955,23.1097],
          '保定': [115.0488,39.0948],
          '兰州': [103.5901,36.3043],
          '包头': [110.3467,41.4899],
          '北京': [116.4551,40.2539],
          '北海': [109.314,21.6211],
          '南京': [118.8062,31.9208],
          '南宁': [108.479,23.1152],
          '南昌': [116.0046,28.6633],
          '南通': [121.1023,32.1625],
          '厦门': [118.1689,24.6478],
          '台州': [121.1353,28.6688],
          '合肥': [117.29,32.0581],
          '呼和浩特': [111.4124,40.4901],
          '咸阳': [108.4131,34.8706],
          '哈尔滨': [127.9688,45.368],
          '唐山': [118.4766,39.6826],
          '嘉兴': [120.9155,30.6354],
          '大同': [113.7854,39.8035],
          '大连': [122.2229,39.4409],
          '天津': [117.4219,39.4189],
          '太原': [112.3352,37.9413],
          '威海': [121.9482,37.1393],
          '宁波': [121.5967,29.6466],
          '宝鸡': [107.1826,34.3433],
          '宿迁': [118.5535,33.7775],
          '常州': [119.4543,31.5582],
          '广州': [113.5107,23.2196],
          '廊坊': [116.521,39.0509],
          '延安': [109.1052,36.4252],
          '张家口': [115.1477,40.8527],
          '徐州': [117.5208,34.3268],
          '德州': [116.6858,37.2107],
          '惠州': [114.6204,23.1647],
          '成都': [103.9526,30.7617],
          '扬州': [119.4653,32.8162],
          '承德': [117.5757,41.4075],
          '拉萨': [91.1865,30.1465],
          '无锡': [120.3442,31.5527],
          '日照': [119.2786,35.5023],
          '昆明': [102.9199,25.4663],
          '杭州': [119.5313,29.8773],
          '枣庄': [117.323,34.8926],
          '柳州': [109.3799,24.9774],
          '株洲': [113.5327,27.0319],
          '武汉': [114.3896,30.6628],
          '汕头': [117.1692,23.3405],
          '江门': [112.6318,22.1484],
          '沈阳': [123.1238,42.1216],
          '沧州': [116.8286,38.2104],
          '河源': [114.917,23.9722],
          '泉州': [118.3228,25.1147],
          '泰安': [117.0264,36.0516],
          '泰州': [120.0586,32.5525],
          '济南': [117.1582,36.8701],
          '济宁': [116.8286,35.3375],
          '海口': [110.3893,19.8516],
          '淄博': [118.0371,36.6064],
          '淮安': [118.927,33.4039],
          '深圳': [114.5435,22.5439],
          '清远': [112.9175,24.3292],
          '温州': [120.498,27.8119],
          '渭南': [109.7864,35.0299],
          '湖州': [119.8608,30.7782],
          '湘潭': [112.5439,27.7075],
          '滨州': [117.8174,37.4963],
          '潍坊': [119.0918,36.524],
          '烟台': [120.7397,37.5128],
          '玉溪': [101.9312,23.8898],
          '珠海': [113.7305,22.1155],
          '盐城': [120.2234,33.5577],
          '盘锦': [121.9482,41.0449],
          '石家庄': [114.4995,38.1006],
          '福州': [119.4543,25.9222],
          '秦皇岛': [119.2126,40.0232],
          '绍兴': [120.564,29.7565],
          '聊城': [115.9167,36.4032],
          '肇庆': [112.1265,23.5822],
          '舟山': [122.2559,30.2234],
          '苏州': [120.6519,31.3989],
          '莱芜': [117.6526,36.2714],
          '菏泽': [115.6201,35.2057],
          '营口': [122.4316,40.4297],
          '葫芦岛': [120.1575,40.578],
          '衡水': [115.8838,37.7161],
          '衢州': [118.6853,28.8666],
          '西宁': [101.4038,36.8207],
          '西安': [109.1162,34.2004],
          '贵阳': [106.6992,26.7682],
          '连云港': [119.1248,34.552],
          '邢台': [114.8071,37.2821],
          '邯郸': [114.4775,36.535],
          '郑州': [113.4668,34.6234],
          '鄂尔多斯': [108.9734,39.2487],
          '重庆': [107.7539,30.1904],
          '金华': [120.0037,29.1028],
          '铜川': [109.0393,35.1947],
          '银川': [106.3586,38.1775],
          '镇江': [119.4763,31.9702],
          '长春': [125.8154,44.2584],
          '长沙': [113.0823,28.2568],
          '长治': [112.8625,36.4746],
          '阳泉': [113.4778,38.0951],
          '青岛': [120.4651,36.3373],
          '韶关': [113.7964,24.7028]
        };
            var dataT = [{
                  name: '上海',
                  value: 95
              },
              {
                  name: '广州',
                  value: 90
              },
              {
                  name: '大连',
                  value: 80
              },
              {
                  name: '南宁',
                  value: 70
              },
              {
                  name: '南昌',
                  value: 60
              },
              {
                  name: '拉萨',
                  value: 50
              },
              {
                  name: '长春',
                  value: 40
              },
              {
                  name: '包头',
                  value: 30
              },
              {
                  name: '重庆',
                  value: 20
              },
              {
                  name: '常州',
                  value: 10
              }
        ];
        geoCoordMap['重庆国博城'] = [106.543071, 29.717986];

        var GZData = [];
        var tempData = ['重庆国博城', GZData];

        dataT.map((item, index) => {
            var arr = [];
            arr.push(item)
            arr.push({
                name: '重庆国博城'
            })
            GZData.push(arr)
        })

        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord],
                        value: dataItem[0].value
                    });
                }
            }
            return res;
        };

        var color = ['#00ff78', '#ff971b', '#acff43', '#ff73b7', '#ffff46', '#27bbfe'];
        var series = [{
            type: 'map',
            map: 'china',
            geoIndex: 1,
            zlevel: 1,
            showLegendSymbol: false, // 存在legend时显示
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: false,
            itemStyle: {
                normal: {
                    areaColor: 'rgba(128, 128, 128, 0)',
                    borderColor: '#49a7d5', //省市边界线00fcff 516a89

                },
                emphasis: {
                    areaColor: 'rgba(128, 128, 128, 0)',
                }
            },
            data: [{
                name: '南海诸岛',
                value: 0,
                itemStyle: {
                    normal: {
                        opacity: 0,
                        label: {
                            show: false
                        }
                    }
                }
            }]
        }, ];

        series.push({
            name: tempData[0],
            type: 'lines',
            zlevel: 3,
            symbol: ['none', 'circle'],
            effect: {
                show: true,
                period: 3, //箭头指向速度，值越小速度越快
                trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbolSize: 4, //图标大小
            },
            lineStyle: {
                normal: {
                    opacity: 1,
                    curveness: 0.4, //曲线的弯曲程度
                    color: '#609fd4'
                }
            },
            data: convertData(tempData[1])
        }, {
            name: tempData[0],
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
                brushType: 'stroke'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',

                }
            },
            symbolSize: function (val) {
                return val[2]/2;
            },
            itemStyle: {
                normal: {
                }
            },
            data: tempData[1].map(function(dataItem) {
                return {
                    name: dataItem[0].name,
                    value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            })
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 4,
            symbolSize: 30,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',

                    color: 'white'
                }
            },
            itemStyle: {
                normal: {
                    color: 'white'
                }
            },
            rippleEffect: {
                scale: 4,
                brushType: 'stroke'
            },
            data: [{
                name: tempData[0],
                value: geoCoordMap[tempData[0]],
                visualMap: false
            }],
        }, {
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 4,
            symbolSize: 20,
            symbol: 'pin',
            itemStyle: {
                normal: {
                    color: 'white',
                }
            },
            rippleEffect: {
            },
            data: [{
                name: tempData[0],
                value: geoCoordMap[tempData[0]],
                visualMap: false
            }],
        });

        var option = {
            backgroundColor: '#404a59',
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    if (params.seriesType == "scatter" && params.name != tempData[0]) {
                        return "<br>" + params.seriesName + " ---> " + params.data.name + "<br />数量：" + params.data.value[2];
                    } else if (params.seriesType == "lines") {
                        return "<br>" + params.data.fromName + " ---> " + params.data.toName + "<br />数量：" + params.data.value;
                    } else {
                        return params.name;
                    }
                }
            },
            visualMap: {
                min: 0,
                max: 100,
                calculable: true,
                color: color,
                show: false
            },
            geo: {
                map: 'china',
                zoom: 1,
                zlevel: 2,
                label: {
                    emphasis: {
                        show: false
                    },
                },
                roam: true, //是否允许缩放
                itemStyle: {
                    normal: {
                        areaColor: '#214278',
                        borderColor: '#195BB9', //省市边界线00fcff 516a89

                    },
                    emphasis: {
                        color: '#112246' //悬浮背景
                    }
                },
            },
        series: series
        };
        allmap.setOption(option);
        window.onresize = allmap.resize;

      },
      getHeatData(cnt, max, min) {
        let data = [];
        let center = {
          lat: 29.7,
          lng: 106.5
        };
        cnt = cnt || 100;
        max = max || 100;
        min = min || 0;
        for (let index = 0; index < cnt; index++) {
          let r = Math.random();
          let angle = Math.random() * Math.PI * 2;
          let heatValue = Math.random() * (max - min) + min;
          data.push({
            lat: center.lat + r * Math.sin(angle),
            lng: center.lng + r * Math.cos(angle),
            value: heatValue
          });
        }
        return {
          max: max,
          min: min,
          data: data
        };
      },
      chart1(){
        var data1 = [20,25,60,90,95,100,80,60,70,40,20,15,];
        var xData  = ["四川","陕西","河南","广东","江苏","安徽","北京","上海","山东","山西","河北","天津",];
        var data2 = []
        for (let i = 0; i < data1.length; i++) {
          data2.push(Math.max.apply(null,data1)*0.15)
        }
        var chart1 = echarts.init(document.getElementById('chart1'));
        var option = {
          tooltip: tooltip1(),
          color: ["rgba(5,93,156,0.6)"],
          grid: grid(20),
          xAxis: xAxis(xData),
          yAxis:yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'%'}),
          series: [{
            name: "趟次均值",
            type: "bar",
            stack: "总量",
            barWidth:'60%',
            itemStyle:{
              normal:{
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#007aff" // 0% 处的颜色
                },
                {
                offset: 1,
                color: "#54d0f3" // 100% 处的颜色
                }], false),
                label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                        color: '#d9efff',
                        fontSize:config().fontSize
                    }
                }
              },
            },
            z:100,
            data: data1
          }]
        };
        chart1.setOption(option)
        window.onresize = chart1.resize;
      },
      chart2(){
        var chart2 = echarts.init(document.getElementById('chart2'));
        var option = {
          grid: grid(20),
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: legend(['区域一', '区域二', '区域三', '区域四', '区域五'],4,left),
          color: ['#1790cf','#39D68F','#E38128','#E25C9B','#006DC3',],
          series: [
            {
              name:'',
              type:'pie',
              selectedMode: 'single',
              radius: [0, '30%'],
              center:['50%','65%'],
              label: {
                  normal: {
                      position: 'inner',
                      fontSize: config().fontSize,
                  }
              },
              labelLine: {
                  normal: {
                      show: false
                  }
              },
              data:[
                  {value:75, name:'区域一', },
                  {value:75, name:'区域二'},
                  {value:75, name:'区域三'},
                  {value:75, name:'区域四'},
                  {value:100, name:'区域五'}
              ]
            },
            {
              name:'',
              type:'pie',
              radius: ['40%', '55%'],
              center:['50%','65%'],
              labelLine:{
                normal:{
                  length:config().lineWidth*8,
                    lineStyle: {
                      width:config().lineWidth*0.5
                  }
                }
              },
              label: {
                  normal: {
                      formatter: '{b|{b}：}{c}',
                      borderColor: '#aaa',
                      fontSize: config().fontSize,
                      rich: {
                          b: {
                              fontSize: config().fontSize,
                              lineHeight: config().lineWidth*12,
                          },
                      }
                  }
              },
              color: ['#1790cf','#39D68F','#E38128','#E25C9B','#006DC3',],
              data:[
                  {value:25, name:'停车场1',itemStyle:{color:'#1790cf',}},//改变每个饼的颜色},
                  {value:25, name:'停车场2',itemStyle:{color:'#1790cf',}},
                  {value:25, name:'停车场3',itemStyle:{color:'#1790cf',}},
                  {value:25, name:'停车场4',itemStyle:{color:'#39D68F',}},
                  {value:25, name:'停车场5',itemStyle:{color:'#39D68F',}},
                  {value:25, name:'停车场6',itemStyle:{color:'#39D68F',}},
                  {value:25, name:'停车场7',itemStyle:{color:'#E38128',}},
                  {value:25, name:'停车场8',itemStyle:{color:'#E38128',}},
                  {value:25, name:'停车场9',itemStyle:{color:'#E38128',}},
                  {value:25, name:'停车场10',itemStyle:{color:'#E25C9B',}},
                  {value:25, name:'停车场11',itemStyle:{color:'#E25C9B',}},
                  {value:25, name:'停车场12',itemStyle:{color:'#E25C9B',}},
                  {value:25, name:'停车场13',itemStyle:{color:'#006DC3',}},
                  {value:25, name:'停车场14',itemStyle:{color:'#006DC3',}},
                  {value:25, name:'停车场15',itemStyle:{color:'#006DC3',}},
                  {value:25, name:'停车场16',itemStyle:{color:'#006DC3',}},
              ]
            }
          ]
        }
        chart2.setOption(option);
        window.onresize = chart2.resize;
      },
      chart3(){
       var chart3 = echarts.init(document.getElementById('chart3'));
        var dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                shadowBlur: 0,
                shadowColor: '#203665'
            }
        };
        var option = {
            series: [{
                name: '第一个圆环',
                type: 'pie',
                clockWise: false,
                radius: [70, 80],
                itemStyle: dataStyle,
                hoverAnimation: false,
                center: ['25%', '50%'],
                data: [{
                    value: 25,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#3a7ad5',
                                    align: 'center',
                                    fontSize: config().fontSize*2,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: config().fontSize,
                                }
                            },
                            formatter: function(params){
                                return "{b|重庆市内}\n\n"+"{a|"+params.value+"%}";
                            },
                            position: 'center',
                            show: true,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#2c6cc4',
                            shadowColor: '#2c6cc4',
                            shadowBlur: 0
                        }
                    }
                }, {
                    value: 75,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: '#24375c'
                        },
                        emphasis: {
                            color: '#24375c'
                        }
                    }
                }]
            }, {
                name: '第二个圆环',
                type: 'pie',
                clockWise: false,
                radius: [70, 80],
                itemStyle: dataStyle,
                hoverAnimation: false,
                center: ['75%', '50%'],
                data: [{
                    value: 75,
                    label: {
                        normal: {
                            rich: {
                                a: {
                                    color: '#603dd0',
                                    align: 'center',
                                    fontSize: config().fontSize*2,
                                    fontWeight: "bold"
                                },
                                b: {
                                    color: '#fff',
                                    align: 'center',
                                    fontSize: config().fontSize,
                                }
                            },
                            formatter: function(params){
                                return "{b|重庆市外}\n\n"+"{a|"+params.value+"%}";
                            },
                            position: 'center',
                            show: true,
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#613fd1',
                            shadowColor: '#613fd1',
                            shadowBlur: 0
                        }
                    }
                },
                {
                    value: 25,
                    name: 'invisible',
                    itemStyle: {
                        normal: {
                            color: '#453284'
                        },
                        emphasis: {
                            color: '#453284'
                        }
                    }
                }
                ]
            }]
        }
        chart3.setOption(option)
        window.onresize = chart3.resize;
      },
      chart4(){
        var xData  = ["重庆市内","四川","陕西","河南","广东","江苏","安徽","北京","上海","山东"];
        var data = [5,20,50,65,90,95,60,65,80,60,45,20,]
        var chart4 = echarts.init(document.getElementById('chart4'));
        var option = {
          grid:  grid(),
          tooltip:  tooltip1(),
          xAxis: xAxis(xData),
          yAxis:yAxiss({'data':'','name':'','lineShow':false,'labelShow':true,'position':'','unit':'%'}),
          series: [ {
            name: '昨日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            data: data,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#6D2346'
                }, {
                  offset: 1,
                  color: '#342242'
                }], false)
              }
            },
            itemStyle: {
              normal: {
                color: '#F92660'
              }
            },
            lineStyle: {
              normal: {
                width: config().lineWidth
              }
            }
          }]
        };
        chart4.setOption(option)
        window.onresize = chart4.resize;
      }
  }
}
</script>
<style lang="scss" scoped>
  #index{
    width: 100%;
    height: 100vh;
    *{margin: 0;padding: 0;}
    #left,#right{
      position: absolute;
      z-index: 1;
      top:7vh;
    }
    .chart{
      height: 85.5%;
    }
    .chart_left{
      height: 45.2vh;
      background: #07213b;
       margin:0.5vh 0.5vh vh 0.5vh!important;
    }
    .chart_right{
      height: 45.2vh;
       margin:0.5vh 0.5vh vh 0.5vh!important;
    }
    #allmap{
      height: 100vh;
      overflow: hidden;
    }
    .chart_center{
        position: absolute;
        top: 8vh;
        margin-left: 30%;
        color: #A9B2CD;
    }
  }
</style>
